<template>
  <x-drawer :visible.sync="props.visible" @cancel="closeSkuVisible">
    <view class="p-drawer">
      <view class="_header">
        <view class="_lf">
          <image :src="skuImg"/>
        </view>
        <view class="_rt">
          <view class="_price align-baseline">
            <text class="tips">¥</text>
            <text class="p-price">{{ skuInfo.skuPrice }}</text>
          </view>
          <view class="_text">
            <text class="_tagselect">
              {{ specText }}
            </text>
          </view>
        </view>
        <view class="icon" @click="closeSkuVisible">
          <x-icon name="icon-025" size="28" color="#C8C9CC"/>
        </view>
      </view>
      <scroll-view class="_scroll" scroll-y="true">
        <!-- 规格展示 -->
        <div class="product-box">
          <div class="product-delcom" v-for="(spec, index) in specList" :key="index">
            <view class="spec-name">{{ spec.attrName }}</view>
            <ul class="product-footerlist clearfix">
              <li
                  v-for="item in spec.attrValueList"
                  :key="item.itemId"
                  v-on:click="specificationBtn(spec.attrName, item.itemId)"
                  v-bind:class="[item.checked?'productActive':'noneActive']">
                <text style="display: inline-block;margin: 0 auto">{{ item.itemName }}</text>
              </li>
            </ul>
          </div>
        </div>

        <view class="sku-num">
          <view class="_lf">数量</view>
          <view class="_rt">
            <view class="_jian">
              <x-button @click="changeSkuNum(skuNum - 1)" :disabled="reduceDisabled" priority="secondary-secondary"
                        size="medium" styles="border: none !important;background: #F2F3F5;padding: 0">
                <text style="font-size: 28rpx;line-height: 28rpx;">-</text>
              </x-button>
            </view>
            <view class="_num">
              <x-input placeholder=" " disabled :value="skuNum" type="text" size="small" textAlign="center"
                       background="#F2F3F5"/>
            </view>
            <view class="_jian">
              <x-button @click="changeSkuNum(skuNum + 1)" priority="secondary-secondary" size="medium"
                        styles="border: none !important;background: #F2F3F5;padding: 0">
                <text style="font-size: 28rpx;line-height: 28rpx;">+</text>
              </x-button>
            </view>
          </view>
        </view>
      </scroll-view>
      <view class="_bottom">
        <x-button size="large" :round="true" @click="buy">立即购买</x-button>
      </view>
    </view>
  </x-drawer>
</template>

<script setup>
import XDrawer from '@/components/x-drawer.vue'
import XInput from '@/components/x-input.vue'
import XButton from '@/components/x-button.vue'
import XIcon from "@/components/x-icon.vue";
import {computed, ref, watch} from "vue";

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  goodsInfo: {
    required: true
  }
})
const emits = defineEmits(['close'])

const skuInfo = ref({})
const skuImg = ref("")
const specList = ref([])
const specText = ref("")
const skuNum = ref(1)
const reduceDisabled = computed(() => skuNum.value <= 1)

function closeSkuVisible() {
  emits("close")
}

function changeSkuNum(num) {
  if (num >= 1) {
    skuNum.value = num
  }
}

function specificationBtn(attrName, itemId) {
  const _specificationList = specList.value;
  let _specText = "已选择："
  let ids = []
  for (let i = 0; i < _specificationList.length; i++) {
    for (let j = 0; j < _specificationList[i].attrValueList.length; j++) {
      if (_specificationList[i].attrName === attrName) {
        if (_specificationList[i].attrValueList[j].itemId === itemId) {
          ids.push(_specificationList[i].attrValueList[j].itemId)
          _specText += _specificationList[i].attrValueList[j].itemName + " "
          _specificationList[i].attrValueList[j].checked = true;
          //选择了，则判断当前是否有图片，且图片内容不能为空，不能为默认lazy图片，则替换
          // that.setSpecificationUrl(_specificationList[i].valueList[j].picUrl);
        } else {
          _specificationList[i].attrValueList[j].checked = false;
        }
      } else if (_specificationList[i].attrValueList[j].checked) {
        ids.push(_specificationList[i].attrValueList[j].itemId)
        _specText += _specificationList[i].attrValueList[j].itemName + " "
      }
    }
  }

  skuInfo.value = getSkuInfo(props.goodsInfo.skuList, ids)
  if (skuInfo.value && skuInfo.value.skuImgUrl) {
    skuImg.value = skuInfo.value.skuImgUrl
  } else {
    skuImg.value = props.goodsInfo.mainImgUrls[0]
  }
  specText.value = _specText;
}

function buy() {
  uni.navigateTo({
    url: '/pages/order/confirm?goodsId=' + props.goodsInfo.id + '&skuId=' + skuInfo.value.id + '&num=' + skuNum.value
  })
}

watch(() => props.goodsInfo, (value, oldValue) => {
  if (!props.goodsInfo || !props.goodsInfo.specList) {
    return
  }
  const _specList = JSON.parse(JSON.stringify(props.goodsInfo.specList))
  // 如果仅仅存在一种货品，那么商品页面初始化时默认checked
  let _specText = '已选择：'
  let ids = []
  for (let i = 0; i < _specList.length; i++) {
    if (_specList[i].attrValueList.length >= 1) {
      ids.push(_specList[i].attrValueList[0].itemId)
      _specList[i].attrValueList[0].checked = true
      _specText += _specList[i].attrValueList[0].itemName + " "
    }
  }
  skuInfo.value = getSkuInfo(props.goodsInfo.skuList, ids)
  if (skuInfo.value && skuInfo.value.skuImgUrl) {
    skuImg.value = skuInfo.value.skuImgUrl
  } else {
    skuImg.value = props.goodsInfo.mainImgUrls[0]
  }
  specText.value = _specText;
  specList.value = _specList
  // let totalPriceStr = formatTotalPrice(skuInfo.skuPrice, this.data.num);
})

function getSkuInfo(skuInfoList, ids) {
  ids.sort()
  let specIds = ids.join("_")
  for (let i = 0; i < skuInfoList.length; i++) {
    let skuInfo = skuInfoList[i];
    if (specIds === skuInfo.specIds) {
      return skuInfo;
    }
  }
}
</script>

<style lang="scss" scoped>
.p-drawer {
  position: relative;
  background: #FFFFFF;
  border-radius: 30rpx 30rpx 0rpx 0rpx;
  min-height: 680rpx;
  max-height: 1264rpx;

  ._header {
    display: flex;
    padding: 24rpx;

    ._lf {
      width: 140rpx;
      height: 140rpx;
      border-radius: 16rpx;
      background: #FFECEC;
      margin-right: 22rpx;

      image {
        width: 100%;
        height: 100%;
      }
    }

    ._rt {
      flex: 1;
      display: flex;
      flex-direction: column;

      ._price {
        display: flex;
        align-items: flex-start;
        flex: 1;
        width: 100%;
        font-size: 28rpx;
        color: $uni-color-primary;

        .p-price {
          display: inline-block;
          font-weight: bold;
          font-size: 48rpx;
        }
      }

      .align-baseline {
        display: flex;
        align-items: baseline;
      }

      ._text {
        width: 100%;
        font-size: 28rpx;
        color: $uni-color-secondary;
        -webkit-line-clamp: 1;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;

        ._tagselect {
          margin-left: 10rpx;
        }
      }
    }

    .icon {
      position: absolute;
      top: 24rpx;
      right: 24rpx;
    }
  }

  ._scroll {
    min-height: 388rpx;
    max-height: 630rpx;
    position: relative;
    padding: 0 24rpx;

    .product-box {
      display: block;
      margin: 0 auto;

      .product-delcom {
        color: #323232;
        font-size: 28rpx;
        display: flex;
        flex-direction: column;

        .spec-name {
          font-size: 30rpx;
          color: $uni-color-default;
        }
      }

      .product-footerlist {
        padding-left: 0;
        margin-top: 30rpx;
      }

      .product-footerlist li {
        list-style: none;
        min-width: 144rpx;
        border-radius: 10rpx;
        color: $uni-color-default;
        text-align: center;
        padding: 18rpx 16rpx;
        float: left;
        font-size: 28rpx;
        line-height: 28rpx;
        margin-right: 30rpx;
        margin-bottom: 30rpx;
        background: $uni-bg-color-grey;
        border: 1rpx solid #F2F3F5;
        position: relative;
      }

      .product-footerlist li.productActive {
        background: #CE4031;
        color: #FFFFFF;
      }
    }

    .sku-num {
      display: flex;
      align-items: center;

      ._lf {
        flex: 1;
        color: $uni-color-default;
        font-size: 28rpx;
        display: flex;
      }

      ._rt {
        display: flex;
        padding-right: 30rpx;

        ._num {
          width: 76rpx;
          background: #F2F3F5;
          margin: 0 4rpx;
        }

        ._jian {
          width: 64rpx;
        }
      }
    }
  }

  ._bottom {
    box-shadow: 0rpx -4rpx 8rpx rgba(230, 177, 177, 0.2);
    padding-bottom: 1rpx;
  }
}
</style>
